<template>
	<screen @filterQuery="filterQuery" ref="screen"  @filterBtnCall="filterQuery">
		<template>
			<block v-for="(item, pIndex) in filterMaskData" :key="pIndex">
				<view class="filter_mask_list" v-show="item.list.length > 0 && !item.hide && item.title != '标签'">
					<view class="filter_mask_title">{{ item.title }}</view>
					<view class="filter_mask_body">
						<view  v-for="(items, index) in item.list" :key="index" :class="{'active' : items.status}"  @click="filterMaskBtn(item, items, pIndex, index)">
							<span>{{ items.name }}</span>
							<i v-if="item.type == 2 && items.status" class="iconfont iconjiaobiao"></i>
						</view>
					</view>
				</view>
			</block>
		</template>
	</screen>
</template>
<script>
import screen from '@/components/App_screen.vue'
export default {
	name: 'raiders-manage-filter',
	components: {
		screen
	},
	props: {
		filterMaskData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
		}
	},
	mounted() {
	},
	methods: {
		/** *
             * 重组分类方法
             * key 为返回的对象的key值
             * status 为是否是需要二级分类
             */
		formatSelect(data, key, status) {
			let classList = []
			let clildClassList = []
			for (let i in data) {
				if (data[i].cat_list && !status) {
					for (let j in data[i].cat_list) {
						let clildObj = {
							status: false,
							name: data[i].cat_list[j].cat_name,
							id: data[i].cat_list[j].cat_id,
							value: 'child',
							key: key
						}
						clildClassList.push(clildObj)
					}
				}
				let obj = {
					status: false,
					name: data[i].top_cat_name || data[i].cat_name,
					id: data[i].top_cat_id || data[i].cat_id,
					list: clildClassList,
					value: status ? '' : 'multi',
					key: key
				}
				classList.push(obj)
				clildClassList = []
			}

			return classList
		},
		// 重组分类
		formatTypeSelect(data) {
			let typeList = []
			for (let i in data) {
				let obj = {
					status: false,
					name: data[i].type_name,
					id: data[i].is_public ? data[i].is_public : data[i].source_type,
					value: data[i].is_public ? 'type_list' : 'source_type'
				}
				typeList.push(obj)
			}

			return typeList
		},
		filterMaskBtn(item, items, pIndex, index) {
			let cloneStatus = items.status
			// 改变当前label的状态
			if (item.type !== 2) {
				for (let i in item.list) {
					item.list[i].status = false
				}
			}

			// 根据条件清空一二级筛选
			if (items.value === 'multi') {
				for (let i in this.filterMaskData[1].list) {
					this.filterMaskData[1].list[i].status = false
				}
			}
			items.status = !cloneStatus
   			this.$emit('update:filterMaskData', this.filterMaskData)
			this.$emit('filterBtnCall', items)
		},
		// 重置
		filterQuery() {
			this.$emit('filterQuery')
		}
	}
}
</script>
<style lang="scss" scoped>
	.filter_mask_list {
		padding:  30px;
		.filter_mask_title {
			color: #666;
			margin-bottom: 26px;
		}
		.filter_mask_body {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 50px;
			& > view {
				position: relative;
				width: calc(33.33% - 10px);
				height: 80px;
				line-height: 80px;
				text-align: center;
				background-color: #f4f4f4;
				border-radius: 10px;
				margin-right: 10px;
				margin-bottom: 10px;
			}
			& > view.active {
				color: #3a1b04;
				background-color: #ffd11a;
				i {
					position: absolute;
					right: 2px;
					bottom: 22px;
					width: 44px;
					height: 38px;
					color: #fff;
				}
			}
		}
	}
</style>

